<template>
  <!-- 选择图片对话框 -->
  <el-dialog
    :visible.sync="selectImgDialogVisible"
    width="90%"
    title="选择爬取任务的图片"
    :z-index="100005"
    modal-append-to-body
    :close-on-click-modal="false"
    class="bg-white rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300"
  >
    <div class="flex-col" style="height: 500px;">
      <div class="flex-1 overflow-auto p-5 bg-gray-50">
        <SelectData ref="imageCrawlerRef" class="w-full h-full" />
      </div>
      <div class="p-4 border-t border-gray-200 bg-white flex justify-center">
        <el-button
          type="primary"
          @click="configSelect"
          class="px-6 py-2 rounded-lg shadow hover:shadow-md transition-all duration-200 flex items-center"
        >
          <i class="fa fa-check mr-2"></i>
          确定选择
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {debounce} from "@/utils";

export default {
  name: '',
  components: {
    SelectData : () => import('@/views/imgManage/imageCrawler/selectData'),
  },
  props: {},
  data() {
    return {
      imagesUrls: [],
      selectImgDialogVisible: false,
    }
  },
  computed: {},
  methods: {
    init(){
      this.selectImgDialogVisible = true
      this.$refs.imageCrawlerRef?.initSelectData()
    },
    configSelect: debounce(function() {
      const data = this.$refs.imageCrawlerRef?.getSelectedData() || [];
      this.imagesUrls = data.map(item => item.imageSrc)
      this.selectImgDialogVisible = false
      this.$emit('selectUrlsCallBack', this.imagesUrls)

      // 添加选择成功提示
      this.$message({
        type: 'success',
        message: `已成功选择 ${this.imagesUrls.length} 张图片`
      })
    }, 500),
  },
  mounted() {

  }
}
</script>


<style scoped lang="scss">

</style>
